<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        后台管理系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/css/x-admin.css" media="all">

    <style>
        .imgs {
            display: none;
        }
    </style>
    <!--百度编辑器-->

</head>
<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>栏目管理</cite></a>
              <a><cite>基本设置</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>

<form class="layui-form layui-form-pane" id="add" enctype="multipart/form-data">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
        </ul>
        <div class="layui-form-item">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="id" required lay-verify="required" autocomplete="off" value="{{ data.id }}"
                       class="layui-input" readonly>
                <input type="hidden" name="parent_id" id="parentId" required lay-verify="required" autocomplete="off" value="{{ data.parent_id }}"
                       class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">级别</label>
            <div class="layui-input-block">
                <input type="text" name="category_level" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_level }}"
                       class="layui-input" readonly>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">编码</label>
            <div class="layui-input-block">
                <input type="text" name="category_no" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_no }}"
                       class="layui-input" readonly>
            </div>
        </div>

       {% if data.category_level > 1 %}
            <div class="layui-form-item">
                <label class="layui-form-label">选择目</label>
                <div class="layui-input-block">
                    <select id="level2-select" lay-filter="level2-select-filter" required>
                        {% for i2 in level2List %}
                            <option value="{{ i2.id }}"
                                    {% if i2.selected == 1 %}
                                        selected
                                    {% endif %}
                            >{{ i2.category_name }}</option>
                        {% endfor %}

                    </select>
                </div>
            </div>
        {% endif %}
        {% if data.category_level == 3 %}
            <div class="layui-form-item">
                <label class="layui-form-label">选择科</label>
                <div class="layui-input-block">
                    <select id="level3-select" lay-filter="level3-select-filter" required>

                    </select>
                </div>
            </div>
        {% endif %}


        <div class="layui-form-item">
            <label class="layui-form-label">种类名称</label>
            <div class="layui-input-block">
                <input type="text" name="category_name" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_name }}"
                       class="layui-input" placeholder="请输入种类名称">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-block">
                <input type="text" name="category_alias" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_alias }}"
                       class="layui-input" placeholder="请输入别名">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">学名</label>
            <div class="layui-input-block">
                <input type="text" name="scientific_name" required lay-verify="required" autocomplete="off"
                       value="{{ data.scientific_name }}"
                       class="layui-input" placeholder="请输入学名">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">拼音</label>
            <div class="layui-input-block">
                <input type="text" name="category_spell" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_spell }}"
                       class="layui-input" placeholder="请输入拼音">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="category_remark" required lay-verify="required" autocomplete="off"
                       value="{{ data.category_remark }}"
                       class="layui-input" placeholder="请输入拼音">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="category_status">
                    <option value="1" {% if data.category_status == 1 %}
                            selected
                    {% endif %} >启用
                    </option>
                    <option value="2" {% if data.category_status == 2 %}
                            selected
                    {% endif %} >禁用
                    </option>
                </select>
            </div>

        </div>


        <div class="layui-form-item">
            <div>
                <button class="layui-btn" id="submitBtn">立即提交</button>
            </div>
        </div>

</form>


</body>
<script src="static/lib/layui/layui.js" charset="utf-8"></script>
<script src="static/js/x-layui.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    {#UE.getEditor('content', {initialFrameWidth: 600, initialFrameHeight: 400,});#}
</script>

<!--栏目缩略图上传-->
<script>

    var level = '{{ data.category_level }}' ?? '1'

    if (level === '3') {
        var level2ParendId = $('#level2-select').find('option:selected').val()
        level2OptionHandle(level2ParendId)
    }
    layui.use('form', function () {
        var form = layui.form();
        if (level !== '1') {
            form.on('select(level2-select-filter)', function (data) {
                console.log('v2 change')
                var value = data.value; // 获得被选中的值
                if (level === '2') {
                    $('#parentId').val(value)
                }
                if (level === '3') {
                    level2OptionHandle(value)
                }
            });
            if (level === '3') {
                form.on('select(level3-select-filter)', function (data) {
                    var value = data.value; // 获得被选中的值
                    $('#parentId').val(value)
                });
            }
        }
        form.render();
    });

    function level2OptionHandle(parentId) {
        $.ajax({
            url: "/category-simple-list?level=2&parentId=" + parentId,  // 后端处理URL
            {#async: false,#}
            method: "GET",
            success: function (result) {
                var lv3_element = $("#level3-select")
                lv3_element.empty()
                if (result.length <= 0) {
                    result = [{id: null, category_name: '请选择'}]
                }
                var defaultParent = result[0]?.id??-1
                var options = result.map(r => {
                    if(r.selected === 1){
                        defaultParent = r.id
                    }
                    return "<option value=" + r.id + "> " + r.category_name + " </option>"
                })
                lv3_element.append(options)

                $('#parentId').val(defaultParent)
                var form = layui.form()
                form.render()
            },
        });

    }

    $(document).ready(function () {
        // 监听表单提交按钮的点击事件
        $("#submitBtn").click(function (event) {
            // 阻止表单默认的提交行为
            event.preventDefault();
            // 使用Ajax提交表单数据
            $.ajax({
                url: "/category_edit",  // 后端处理URL
                method: "POST",       // 使用POST方法提交
                data: $("#add").serialize(),  // 使用serialize()方法将表单数据序列化
                success: function (response) {
                    // 请求成功时的处理逻辑
                    alert("操作成功");
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    parent.location.reload();
                },
                error: function (xhr, status, error) {
                    // 请求失败时的处理逻辑
                    alert("操作失败");
                }
            });
        });
    });

</script>


</html>